<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>MyTechRider - Batería</title>
	<meta name="description" content="My Tech Rider">
	<meta name="keywords" content="Tech Rider">
	<meta name="author" content="Jonatan Martínez">
	<link rel="shortcut icon" href="images/favicon.ico">

	<link rel="stylesheet" type="text/css" href="css/estilos-app.css">
	<link rel="stylesheet" type="text/css" href="css/bx-slider.css">
</head>
<body>
	<div class="ipad">
		<div class="container-app">
			<header>
				<a href="#">Volver al Backline</a>
				<h1>Batería</h1>
			</header>
			<section class="instrument drums">
				<form class="musico" action="">
					<input type="text" name="nombre-musico" placeholder="Nombre del músico">
				</form>
				<a class="save" href="#">Guardar</a>
				<div class="clear"></div>
				<section class="col left">
					<div class="sets">
						<h3>Sets</h3>
						<ul>
							<li><a class="selected" href="#">Set 1 </br><span>(2 toms)</span></a></li>
							<li><a href="#">Set 2 </br><span>(3 toms)</span></a></li>
							<li><a href="#">Set 3 </br><span>(2 bombos,3 toms)</span></a></li>
						</ul>
					</div>
					<div class="brand">
						<h3>Marca</h3>
						<ul>
							<li><a href="#">DW</a></li>
							<li><a class="selected" href="#">Pdp</a></li>
							<li><a href="#">Sonor</a></li>
							<li><a href="#">Yamaha</a></li>
							<li><a href="#">Tama</a></li>
							<li><a href="#">Pearl</a></li>
						</ul>
					</div>
					<div class="position">
						<h3>Posición</h3>
						<ul>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a class="selected" href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">6</a></li>
							<li><a href="#">7</a></li>
							<li><a href="#">8</a></li>
							<li><a href="#">9</a></li>
							<li><a href="#">10</a></li>
							<li><a href="#">11</a></li>
							<li><a href="#">12</a></li>
							<li><a href="#">13</a></li>
							<li><a href="#">14</a></li>
							<li><a href="#">15</a></li>
						</ul>
					</div>
				</section>
				<section class="col right">
					<div class="slider-container">
						<h3>Micrófonos</h3>
						<div class="pieza">
							<ul class="bxslider">
								<li class="bombo">
									<form class="canal" action="">
										Canal: <input type="text" name="canal" placeholder="#-#">
									</form>
									<figure><img src="images/bombo.png"></figure>
									<ul class="brand">
										<li><a class="selected" href="#">Shure Beta 52A</a></li>
										<li><a href="#">Shure Pg52</a></li>
										<li><a href="#">Akg D112</a></li>
										<li><a href="#">Sennheiser e602</a></li>
									</ul>
								</li>
								<li class="redoblante">
									<form class="canal" action="">
										Canal: <input type="text" name="canal" placeholder="#-#">
									</form>
									<figure><img src="images/redoblante.png"></figure>
									<ul class="brand">
										<li><a href="#">Shure Sm 57</a></li>
										<li><a href="#">Shure Beta 56A</a></li>
										<li><a href="#">Shure Pg56</a></li>
										<li><a href="#">Sennheiser e604</a></li>
										<li><a href="#">Akg D40</a></li>
									</ul>
								</li>
								<li class="toms">
									<form class="canal" action="">
										Canal: <input type="text" name="canal" placeholder="#-#">
									</form>
									<figure><img src="images/toms.png"></figure>
									<ul class="brand">
										<li><a href="#">Shure Beta 98A</a></li>
										<li><a href="#">Akg D40</a></li>
										<li><a href="#">Sure Pg 56</a></li>
										<li><a href="#">Sennheiser e604</a></li>
									</ul>
								</li>
								<li class="hi-hat">
									<form class="canal" action="">
										Canal: <input type="text" name="canal" placeholder="#-#">
									</form>
									<figure><img src="images/hi-hat.png"></figure>
									<ul class="brand">
										<li><a href="#">Shure Sm 81</a></li>
										<li><a href="#">Shure Sm 57</a></li>
										<li><a href="#">Sennheiser e614</a></li>
										<li><a href="#">Akg C430</a></li>
									</ul>
								</li>
								<li class="overheads">
									<form class="canal" action="">
										Canal: <input type="text" name="canal" placeholder="#-#">
									</form>
									<figure><img src="images/overheads.png"></figure>
									<ul class="brand">
										<li><a href="#">Shure Sm 81</a></li>
										<li><a href="#">Akg C430</a></li>
										<li><a href="#">Sennheiser e614</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</section>
			</section>
		</div>
	</div>	

	<!-- jQuery library -->
	<script src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src = "js/jquery.easing.1.3.js"></script>

	<!-- BXSLIDER plugin -->
	<script src = "js/jquery.bxslider.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.bxslider').bxSlider({
			  infiniteLoop: true,
			  hideControlOnEnd: true,
			  easing: 'easeOutBounce',
			  infiniteLoop: false,
			  speed: 400
			});	
        });
    </script>

</body>
</html>